<template>
  <view class="content">
    <view class="searchBox">
      <u-calendar :show="show" mode="range" @confirm="confirm" @close="show = false" :allowSameDay="true"
        :minDate="minDate" :closeOnClickOverlay="true" monthNum="13"></u-calendar>
      <view class="timeBox" @click="show = true">
        <span style="margin-right: 10rpx;">日期</span>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.start_date}}
        </view>
        <view style="margin: 0 10rpx;">
          至
        </view>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.end_date}}
        </view>
      </view>
      <view class="iptBox">
        <!--  <input class="ipt" type="text" placeholder="输入关键词" placeholder-class="iptPla" v-model="info.search_data"> -->
        <view class="searchBtn" @tap="getUserLogDetail()">
          搜索
        </view>
      </view>
    </view>

    <view class="list">
      <view class="item f-21  c-66" v-for="(i,k) in list" :key="k">
        <view class="">
          变更前课时:
          <text>{{i.before_module_minute}}分钟</text>
        </view>
        <view class="">
          变更后课时:
          <text>{{i.after_module_minute}}分钟</text>
        </view>
        <view class="">
          变更课时:
          <text>{{i.module_minute}}分钟</text>
        </view>
        <view class="" style="text-align: right;margin: 0;">
          创建时间:
          <text style="color: #D43030;">{{i.create_time}}</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        info: {
          start_date: '',
          end_date: '',
          user_id: '',
          page: 1,
          size: 10
        },
        minDate: '',
        list: [],
      }
    },
    onLoad(options) {
      // 在页面加载时获取传递的参数
      this.info.user_id = options.id;
      this.chooseTimed()
      this.getDate()
      this.getUserLogDetail()
    },
    onReachBottom() {
      this.getUserLogDetail()
    },
    onPullDownRefresh() {
      this.info.page = 1,
        this.info.size = 10,
        this.info.search_data = '',
        this.list = []
      this.getFeedbackDayList()
    },
    methods: {

      // 设置默认日期，最大值为今天，最小值为去年今天
      chooseTimed() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month <= 9) {
          month = '0' + month;
        }
        if (day <= 9) {
          day = '0' + day;
        }
        let minyear = year - 1;
        this.minDate = minyear + '-' + month + '-' + day;
        this.maxDate = year + '-' + month + '-' + day;
      },
      getDate() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
        const day = currentDate.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        this.info.start_date = formattedDate
        this.info.end_date = formattedDate
      },
      confirm(e) {
        this.info.start_date = e[0].replace(/-/g, "-");
        this.info.end_date = e[e.length - 1].replace(/-/g, "-");
        this.show = false
      },
      async getUserLogDetail() {
        uni.stopPullDownRefresh();
        const {
          data: res
        } = await uni.$http.post('school/others/getUserLogDetail', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        console.log(this.info);
        console.log(res);
        if (res.data.data.length) {

          this.list = this.list.concat(res.data.data);
          this.info.page += 1;
        } else {
          this.hasMore = false;
          this.toast.msg('没有更多数据了！')
        }

      },

    },

  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;

    .btns {
      color: #FFFFFF;
      text-align: center;
      line-height: 36rpx;
      font-size: 21rpx;
      margin-left: 293rpx;
      display: flex;

      view {
        width: 80rpx;
        height: 36rpx;
        border-radius: 8rpx;
      }

      .cancel {
        background: #A6A6A6;
        margin-right: 32rpx;
      }

      .confirm {
        background-color: #2A82E4;
      }
    }

    .searchBox {
      width: 670rpx;
      margin: 0 auto;
      padding: 0 20rpx;

      .timeBox {
        display: flex;
        height: 78rpx;
        line-height: 78rpx;
        align-items: center;
        margin-bottom: 18rpx;
        font-size: 21rpx;

        .time {
          width: 250rpx;
          height: 78rpx;
          border-radius: 10rpx;
          background: #FFFFFF;
          border: 2rpx solid #FCF7F7;
          padding-left: 26rpx;
          color: #666;

          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;
            vertical-align: middle;
          }
        }
      }

      .iptBox {
        display: flex;

        .ipt {
          box-sizing: border-box;
          width: 378rpx;
          height: 66rpx;
          padding-left: 75rpx;
          border: 2rpx solid #FCF7F7;
          border-radius: 10rpx;
          margin-right: auto;
        }

        .iptPla {
          color: #999;
          font-size: 22rpx;
        }

        .searchBtn {
          display: inline-block;
          background: #A6A6A6;
          width: 100rpx;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          margin-left: auto;
          font-size: 24rpx;
        }

        .addBtn {
          width: 100rpx;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          font-size: 24rpx;
          background: linear-gradient(90deg, #7948EA 0%, #1AADA4 100%);
          color: #fff;
          margin-left: 14rpx;
        }
      }
    }

    .list {
      width: 698rpx;
      margin: 0 auto;
      margin-top: 20rpx;

      .item {
        margin-bottom: 15rpx;
        width: 698rpx;
        border-radius: 10rpx;
        background: #FFFFFF;
        border: 2rpx solid #ECECEC;
        color: #999;
        font-size: 24rpx;
        padding: 25rpx 20rpx;

        view {
          margin: 10rpx 0;

          text {
            margin-left: 10rpx;
            color: #00BAAD;
          }
        }
      }
    }
  }
</style>